<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                padding: 0 ;
                margin: 0 ;
            }
            .border{
                width: 600px;
                height: 500px;
                margin: 40px auto;
                background-image: url("imgs/zhadan.jpg");
                background-size: 590px;
            }
            .border1{
                width: 200px;
                height: 500px;
                background-color: rgba(255,255,255,0.1);
                float: left;
            }
            .border2{
                width: 200px;
                height: 500px;
                background-color: rgba(255,255,255,0.1);
                float: left;
            }
            .border3{
                width: 200px;
                height: 500px;
                float: left;
            }
            .border1-1{
                width: 30px;
                height: 30px;
                border-radius: 50%;
                display: inline-block;
                position: relative;
                background-color: blue;
                top: 200px;
                left: 160px;
            }
            .border1-2{
                width: 30px;
                height: 30px;
                border-radius: 50%;
                display: inline-block;
                position: relative;
                background-color: red;
                top: 240px;
                left: 125px;
            }
            .border1-3{
                width: 30px;
                height: 30px;
                border-radius: 50%;
                display: inline-block;
                position: relative;
                background-color: blue;
                top: 280px;
                left: 91px;
            }
            .border3-1{
                width: 30px;
                height: 30px;
                border-radius: 50%;
                display: inline-block;
                background-color: blue;
                position: relative;
                left: 7px;
                top: 198px;
            }
            .border3-2{
                width: 30px;
                height: 30px;
                border-radius: 50%;
                display: inline-block;
                background-color: blue;
                position: relative;
                right: 28px;
                top: 242px;
            }
            .border3-3{
                width: 30px;
                height: 30px;
                border-radius: 50%;
                display: inline-block;
                background-color: blue;
                position: relative;
                right: 61px;
                top: 284px;
            }
            .border2-1{
                width: 200px;
                height: 150px;
                float: left;
                position: relative;
                top: 189px;
                background-image: url("imgs/huo.jpg");

                /*background-color: rgb(157,157,157);*/
            }
            .daojishi{
                font-size: 40px;
                display: inline-block;
                margin: 20px auto;
                padding-left: 20px;
            }
            .zong_an{
                width: 198px;
                height: 50px;
            }
            .anniu1{
                width: 35px;
                height: 35px;
                display: inline-block;
                float: left;
                padding-left:24px;
                margin-top: 8px;
                border-radius: 50%;
            }
            .anniu2{
                width: 38px;
                height: 36px;
                display: inline-block;
                float: left;
                padding-left:24px;
                margin-top: 8px;
                border-radius: 50%;
            }
            .anniu3{
                width: 35px;
                height: 35px;
                display: inline-block;
                float: left;
                padding-left:24px;
                margin-top: 8px;
                border-radius: 50%;
            }
            
        </style>
    </head>
    <body>
    <div id="bao_zha"></div>
    <div class="border" id="z_kuang">
        <div class="border1">
            <div class="border1-1"></div>
            <div class="border1-2"></div>
            <div class="border1-3"></div>
        </div>
        <div class="border2">
            <div class="border2-1">
                <span class="daojishi">00:00:20</span>
                <div class="zong_an">
                    <img class="anniu1" src="imgs/anniu1.png" alt="1">
                    <img class="anniu2" src="imgs/anniu2.png" alt="1">
                    <img class="anniu3" src="imgs/anniu1.png" alt="1">
                </div>
            </div>
        </div>
        <div class="border3">
            <div class="border3-1"></div>
            <div class="border3-2"></div>
            <div class="border3-3"></div>
        </div>
    </div>

    <script>
        var deng1=document.getElementsByTagName("div")[3];
        var deng2=document.getElementsByTagName("div")[4];
        var deng3=document.getElementsByTagName("div")[5];
        var deng4=document.getElementsByTagName("div")[10];
        var deng5=document.getElementsByTagName("div")[11];
        var deng6=document.getElementsByTagName("div")[12];
        console.log(deng4);
        function funtion() {
            if(deng1.style.backgroundColor === "blue"){
                    deng1.style.backgroundColor="red";
                }else {
                    deng1.style.backgroundColor="blue";
                }
        }
        var intervar1=setInterval(
            function () {
                if(deng1.style.backgroundColor === "blue"){
                    deng1.style.backgroundColor="red";
                }else {
                    deng1.style.backgroundColor="blue";
                }
            },100
        );
        var intervar2=setInterval(
            function () {
                if(deng2.style.backgroundColor === "red"){
                    deng2.style.backgroundColor="blue";
                }else {
                    deng2.style.backgroundColor="red";
                }
            },100
        );
        var intervar3=setInterval(
            function () {
                if(deng3.style.backgroundColor === "blue"){
                    deng3.style.backgroundColor="red";
                }else {
                    deng3.style.backgroundColor="blue";
                }
            },100
        );
        var intervar4=setInterval(
            function () {
                if(deng4.style.backgroundColor === "red"){
                    deng4.style.backgroundColor="blue";
                }else {
                    deng4.style.backgroundColor="red";
                }
            },100
        );
        var intervar5=setInterval(
            function () {
                if(deng5.style.backgroundColor === "blue"){
                    deng5.style.backgroundColor="red";
                }else {
                    deng5.style.backgroundColor="blue";
                }
            },100
        );
        var intervar6=setInterval(
            function () {
                if(deng6.style.backgroundColor === "red"){
                    deng6.style.backgroundColor="blue";
                }else {
                    deng6.style.backgroundColor="red";
                }
            },100
        );
        //添加倒计时  00:00:20
        var dao_shi=document.getElementsByTagName("span")[0];
        var img1=document.getElementsByTagName("img")[0];
        var num=20;
        var scond=1000;
        function fun() {
            if (num>9){
                    dao_shi.innerText="00:00:"+num;
                    num-=1;
                }else {
                    dao_shi.innerText="00:00:0"+num;
                    num-=1;
                }
                if (num<1){
                    dao_shi.innerText="它炸了！";
                }
        }
        var intevar=setInterval(fun,scond);
        //获取三个按钮的元素
        var anniu1=document.getElementsByTagName("img")[0];
        var anniu2=document.getElementsByTagName("img")[1];
        var anniu3=document.getElementsByTagName("img")[2];
        var baozha=document.getElementById("bao_zha");
        var z_kuang=document.getElementById("z_kuang");
        console.log(z_kuang);
        //创建 按anniu1 的事件
        anniu1.onclick=function () {
            z_kuang.display="none";
            var img=document.createElement("img");
            img.setAttribute("src","imgs/baozha.jpg");
            img.style.width="800px";
            img.style.height="800px";
            dao_shi.innerText="我直接炸";
            clearInterval(intevar);

        };
        console.log(anniu2);
        //创建 按anniu2 的事件
        anniu2.onclick=function () {
            scond=200;
            clearInterval(intevar);
            var intevar=setInterval(fun,scond);
        };
        //创建 按anniu3 的事件
        console.log(anniu3);
        anniu3.onclick=function () {
            dao_shi.innerText="我停了";
            clearInterval(intevar);
        };
    </script>
    </body>
</html>
